<template>
    <el-table
      ref="baseListTableRef"
      :data="state.listTableData"
      v-loading="state.listLoading"
      :border="border"
      :header-cell-style="{ background: '#e1e4e5', color: '#80878f' }"
      :show-header="showHeader"
      stripe
      v-bind="$attrs"
      :row-key="columnConfigs.rowKey"
      :show-summary="showSummary"
      :max-height="defaultHeight===0?'-':(windowHeight - 105 - defaultHeight)"
      :tree-props="{ children: 'subList', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-if="columnConfigs.selection"
        align="center"
        type="selection"
        width="35"
        :reserve-selection="columnConfigs.reserveSelection"
      />
      <el-table-column
        v-if="columnConfigs.sortIndex"
        align="center"
        width="50"
        label="序号"
      >
        <template #default="scope">
          <span
            v-text="state.pageSize * (state.pageNumber - 1) + scope.$index + 1"
          ></span>
        </template>
      </el-table-column>
  
      <template v-for="(item, index) in columnConfigs.headers">
        <el-table-column
          :prop="item.columnName"
          :label="item.columnLabel"
          :sortable="item.sortable"
          :column-key="item.columnKey"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align"
          show-overflow-tooltip
        >
          <template v-if="item.custom" #default="scope">
            <slot :name="item.columnName" :index="index" :scope="scope" />
          </template>
        </el-table-column>
      </template>
      <el-table-column
        v-if="operateBtnVisible"
        :width="operateWidth"
        :align="operateAlign"
        :fixed="fixedType"
        label="操作"
      >
        <template #default="scope">
          <slot name="operateBtns" :scope="scope" />
        </template>
      </el-table-column>
    </el-table>
    <div class="page" v-if="showPages">
      <div class="margin_right_10">
        <slot name="beforePageBtns" style="margin-right: 10px" />
      </div>
  
        <el-pagination
          v-model:current-page="state.pageNumber"
          v-model:page-size="state.pageSize"
          :page-sizes="columnConfigs.pageSizes"
          layout="total, sizes, prev, pager, next"
          :total="total"
          background
          size="small"
          @size-change="sizeChangeHandler"
          @current-change="currentChangeHandler"
        />
      <slot name="afterPageBtns" />
    </div>
  </template>
  <script setup lang="ts">
  import { reactive, ref, unref, watch } from "vue";
  import { useApp } from "../../pinia/modules/app";
  import { storeToRefs } from "pinia";
  const { windowHeight } = storeToRefs(useApp());
  const emit = defineEmits(["pushCurrentChange", "pushSizeChange"]);
  const props = defineProps({
    listData: {
      type: Array,
      default() {
        return [];
      },
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    showPages: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    columnConfigs: {
      type: Object,
      default() {
        return {};
      },
    },
    // 是否显示合计
    showSummary: {
      type: Boolean,
      default: false,
    },
    sumText:{
      type:String,
      default:"合计"
    },
    operateBtnVisible: {
      type: Boolean,
      default: true,
    },
    defaultHeight: {
      type: Number,
      default: 0,
    },
    operateWidth: {
      type: Number,
      default: 80,
    },
    fixedType: {
      type: String,
      default: "right",
    },
    operateAlign: {
      type: String,
      default: "left",
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    maxPageSize: {
      type: Number,
      default: 20,
    },
    total: {
      type: Number,
      default: 1,
    },
  
  });
  // 初始化数据
  let state = reactive({
    listTableData: props.listData,
    listLoading: props.loading,
    pageNumber: props.currentPage,
    pageSize: props.maxPageSize,
  });
  // 监听数据变化
  watch(
    () => props.listData,
    (val) => {
      state.listTableData = val;
    },
    { deep: true }
  );
  watch(
    () => props.loading,
    (val) => {
      state.listLoading = val;
    },
    { deep: true }
  );
  watch(
    () => props.currentPage,
    (val) => {
      state.pageNumber = val;
    },
    { deep: true }
  );
  
  const baseListTableRef = ref<any>(null);
  
  const selectDataHandler = () => {
    const listTableDom: any = unref(baseListTableRef);
    return listTableDom.getSelectionRows();
  };
  
  const clearDataHandler = () => {
    const listTableDom: any = unref(baseListTableRef);
    listTableDom.clearSelection();
  };
  
  defineExpose({ selectDataHandler, clearDataHandler });
  
  const sizeChangeHandler = (val: Number) => {
    state.pageNumber = 1;
    emit("pushSizeChange", val);
  };
  const currentChangeHandler = (val: Number) => {
    emit("pushCurrentChange", val);
  };
  </script>
  